<template>
    <el-skeleton animated :rows="10" :loading="loading">
        <div>
            <el-row class="row-bg" id="k1">
                <el-col :span="8">
                    <el-button style="display: flex;float: left;margin-left: 10px;" type="primary" size="small"
                        @click="xz">新增</el-button>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="input" placeholder="根据权限名查询" @input="handlerChange" class="input-with-select">
                        <template #append>
                            <el-button circle>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-row>
                        <el-col :span="6">
                            <el-checkbox label="禁用" @change="changej" v-model="jyong" />
                        </el-col>
                        <el-col :span="6">
                            <el-checkbox label="公开" @change="changeg" v-model="gkai" />
                        </el-col>
                        <el-col :span="6">
                            <el-checkbox label="发布" @change="changef" v-model="fbu" />
                        </el-col>
                        <el-col :span="6">
                            <el-checkbox label="菜单" @change="changec" v-model="cdan" />
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 20px;">
            <el-table :data="tableData" v-loading="loadingshow" stripe style="width: 100%" border>
                <el-table-column prop="id" v-if="false" label="编号" width="" />
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="权限名" />
                <el-table-column prop="url" label="地址" width="" />
                <el-table-column prop="icon" label="图标" width="">
                    <template #default="scope">
                        <el-icon :icon="scope.row.icon"></el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="isMenu" label="菜单">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.isMenu == 1">
                            是
                        </el-tag>
                        <el-tag v-else>
                            否
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isPublic" label="公开" width="">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.isPublic == 1">
                            是
                        </el-tag>
                        <el-tag v-else>
                            否
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isPublish" label="发布" width="">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.isPublish == 1">
                            是
                        </el-tag>
                        <el-tag v-else>
                            否
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isBan" label="禁用">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.isBan ==0">
                            否
                        </el-tag>
                        <el-tag v-else>
                            是
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="parent" label="子级" width="">
                    <template #default="scope">
                        <el-tag type="primary" v-if="scope.row.parent == null">
                            0
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isUse" label="使用" width="">
                    <template #default="scope">
                        <el-tag>
                            {{ scope.row.isUse }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button size="small" type="primary" plain @click="info(scope.row)">详情</el-button>&nbsp;
                        <!-- Popconfirm气泡确认框 -->
                        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon="el-icon-info"
                            icon-color="red" v-if="scope.row.isPublish == 1 && scope.row.isBan == 0" title="确认要禁用吗？"
                            @confirm="jy(scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger">禁用</el-button>&nbsp;
                            </template>
                        </el-popconfirm>
                        <template v-else-if="scope.row.isPublish == 0">
                            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon="el-icon-info"
                                icon-color="red" title="确认要删除吗？" @confirm="del(scope.row)">
                                <template #reference>
                                    <el-button size="small" plain type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>&nbsp;

                            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon="el-icon-info"
                                icon-color="red" title="确认要发布吗？" @confirm="fb(scope.row)">
                                <template #reference>
                                    <el-button size="small" type="success">发布
                                    </el-button>
                                </template>
                            </el-popconfirm>&nbsp;
                        </template>
                        <el-button style="margin-left:0px" v-if="scope.row.isPublish == 1 && scope.row.isBan == 1" plain
                            size="small" @click="hf(scope.row)" type="success">恢复</el-button>&nbsp;
                        <template v-if="(scope.row.isPublish == 1 && scope.row.isBan == 0 && scope.row.useCount == 0)">
                            <el-button style="margin-left:0px" type="info" @click="qx(scope.row)" plain size="small">取消</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div id="k2">
                <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[10, 20, 30, 40]"
                    layout=" sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </el-skeleton>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getRights, deleteRights, BanRights, PublishRights } from '../../api/Right/index'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        const data = reactive({
            tableData: [],//表格数据
            page: 1,//当前页
            limit: 10,//每页数
            total: 0,//总条数
            loadingshow: false,//表格加载
            loading: true,//骨架屏
            key: '',
            isMenu: '' as any,
            isPublic: '' as any,
            isPublish: '' as any,
            isBan: '' as any,
            input: '',
            jyong: '',//禁用选中
            gkai: '',//公开选中
            fbu: '',//发布选中
            cdan: ''//菜单选中
        })

        const events = {
            //显示表格数据
            getdata(key: any, isMenu: any, isPublic: any, isPublish: any, isBan: any) {
                getRights({
                    page: data.page,
                    limit: data.limit,
                    key: key,
                    isMenu: isMenu,
                    isPublic: isPublic,
                    isPublish: isPublish,
                    isBan: isBan
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.total = res.data.total
                        data.tableData = res.data.data
                        data.loadingshow = false
                        data.loading = false
                    }
                })
            },
            //分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdata(data.key, data.isMenu, data.isPublic, data.isPublish, data.isBan);
                data.loadingshow = true;
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata(data.key, data.isMenu, data.isPublic, data.isPublish, data.isBan);
                data.loadingshow = true;
            },
            //查询
            handlerChange(e: any) {
                data.loadingshow = true;
                data.key = e;
                events.getdata(data.key, data.isMenu, data.isPublic, data.isPublish, data.isBan);
                if (!e) {
                    data.key = "";
                    events.getdata(data.key, data.isMenu, data.isPublic, data.isPublish, data.isBan);
                }
            },
            xz() {
                router.push('/right/add')
            },
            //详情
            info(obj: any) {
                data.loadingshow = true
                setTimeout(() => {
                    data.loadingshow = false
                    router.push("/right/detail?id=" + obj.id)
                }, 1500)
            },
            //删除
            del(obj: any) {
                data.loadingshow = true;
                deleteRights({
                    rids: [obj.id]
                }).then((res: any) => {
                    if (res.result == 0) {
                        events.getdata(data.key, data.isMenu, data.isPublic, data.isPublish, data.isBan);
                        ElMessage({
                            message: '操作成功',
                            type: 'success'
                        });
                    } else {
                        data.loadingshow = false;
                        ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                })
            },
            //发布
            fb(obj:any,val=1) {
                data.loadingshow = true;
            PublishRights({
                rids: [obj.id],
                isPublish: val
            }).then((res:any) => {
                console.log("-----------", res);
                if (res.result === 0) {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish, data.isMenu);
                    ElMessage({
                        message: '操作成功',
                        type: 'success'
                    });
                    data.loadingshow = false;
                } else {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish, data.isMenu);
                    ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                }
            })
            },
            //取消
            qx(obj:any) {
                events.fb(obj,0)
            },
            //恢复
            hf(obj:any) {
                events.jy(obj,0)
            },
            //禁用
            jy(obj:any,val=1) {
                data.loadingshow = true;
                BanRights({
                rids: [obj.id],
                isBan: val
            }).then((res:any) => {
                console.log("-----------", res);
                if (res.result === 0) {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish, data.isMenu);
                    ElMessage({
                        message: '操作成功',
                        type: 'success'
                    });
                    data.loadingshow=false
                } else {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish, data.isMenu);
                    ElMessage({
                            message: '删除失败',
                            type: 'error'
                        });
                }
            })
            },
            //选中禁用
            changej() {
                data.loadingshow = true;
                if (data.jyong) {
                    events.getdata(data.key, data.isBan = 0, data.isPublic, data.isPublish, data.isMenu);
                } else {
                    events.getdata(data.key, data.isBan = 1, data.isPublic, data.isPublish, data.isMenu);
                }
            },
            //选中公开
            changeg() {
                data.loadingshow = true;
                if (data.gkai) {
                    events.getdata(data.key, data.isBan, data.isPublic=1, data.isPublish, data.isMenu);
                } else {
                    events.getdata(data.key, data.isBan, data.isPublic=-1, data.isPublish, data.isMenu);
                }
            },
            //选中发布
            changef() {
                data.loadingshow = true;
                if (data.fbu) {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish=1, data.isMenu);
                } else {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish=-1, data.isMenu);
                }
            },
            //选中菜单
            changec() {
                data.loadingshow = true;
                if (data.cdan) {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish, data.isMenu=1);
                } else {
                    events.getdata(data.key, data.isBan, data.isPublic, data.isPublish, data.isMenu=-1);
                }
            }
        }

        onMounted(() => {
            events.getdata(data.key, data.isMenu, data.isPublic, data.isPublish, data.isBan)
        })


        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
<style>
#k1 {
    margin-left: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#k2 {
    margin-top: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
</style>